<template>
  <div class="container">
    <TeacherSidebar />
    <div class="right-content">
      <main class="main">
        <div class="statistics">
          <div class="statistic-item">
            <span>学生人数: {{ 99 }}</span>
          </div>
          <div class="statistic-item">
            <span>老师对话数: {{ 2 }}</span>
          </div>
          <div class="statistic-item">
            <span>学生对话次数: {{ 328 }}</span>
          </div>
        </div>

        <div class="charts">
          <h2>平均每人会话数</h2>
          <div class="chart">
            <canvas ref="chartCanvas"></canvas>
          </div>
        </div>
      </main>
    </div>
  </div>

</template>

<script setup>
import TeacherSidebar from '@/components/TManageSidebar.vue';
import { onMounted, ref } from 'vue';
import Chart from 'chart.js/auto';

const chartCanvas = ref(null);

onMounted(() => {
  const ctx = chartCanvas.value.getContext('2d');
  new Chart(ctx, {
    type: 'bar',
    data: {
      labels: ['第一讲', '第二讲', '第三讲', '第四讲', '第五讲'],
      datasets: [{
        label: '平均每人会话数',
        data: [0.2, 0.4, 0.7, 0.8, 0.6],
        backgroundColor: '#4B7BF5',
        barThickness: 30,
        maxBarThickness: 35
      }]
    },
    options: {
      responsive: true,
      maintainAspectRatio: false,
      scales: {
        y: {
          beginAtZero: true,
          max: 1
        }
      },
      layout: {
        padding: {
          left: 100,
          right: 100
        }
      }
    }
  });
});
</script>

<style scoped>
.container {
  display: flex;
  min-height: 100vh;
}

.right-content {
  margin-left: 160px;
  flex: 1;
}

.statistics {
  margin: 20px;
  padding: 20px;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0,0,0,0.1);
  display: flex;
  justify-content: space-around;
}

.statistic-item {
  text-align: center;
  padding: 20px;
}

.statistic-item span {
  font-size: 20px;
  color: #303133;
}

.charts {
  margin: 20px;
  padding: 20px;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0,0,0,0.1);
}

.chart {
  height: 300px;
  margin: 20px 0;
}

h2 {
  margin-top: 20px;
}
</style>